<template>
  <div>
    <a-modal
      :visible.sync="visible"
      v-bind="$attrs"
      v-on="$listeners"
      :maskClosable="false"
      :footer="null"
      width="650px"
      title="编辑"
      wrapClassName="add-modal-container"
      @cancel="closeModal()"
    >
      <div class="curve-modal-body">
        <a-form-model ref="ruleForm" :model="form" :rules="rules">
          <a-row :gutter="0">
            <a-col :span="24">
              <a-form-model-item label="梁号" prop="componentParts">
                <a-select
                  showSearch
                  allowClear
                  placeholder="请选择梁号"
                  v-model="form.componentParts"
                  @popupScroll="handlePopupScroll"
                  @search="handleSearchStaff"
                  @select="handleSelect"
                  :loading="pileLoading"
                >
                  <a-select-option
                    :value="item"
                    v-for="(item, index) in curPileSource"
                    :key="index"
                  >
                    {{ item }}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
      </div>
      <div class="curve-modal-footer">
        <a-button type="default" @click="closeModal()">取消 </a-button>
        <a-button type="primary" :loading="buttonLoading" @click="onSubmit()">
          确定
        </a-button>
      </div>
    </a-modal>
  </div>
</template>

<script>
import { notificationTip } from "@/utils";
import { getPartsList, saveZlParts } from "@/api/wisdom-beam/collect-app.js";
export default {
  name: "editModal",
  components: {},
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    dataSoucre: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  watch: {
    visible: {
      handler(val) {
        this.$emit("update:visible", val);
        if (val) {
          this.getData();
        }
      },
      immediate: true,
    },
  },
  data() {
    return {
      buttonLoading: false,
      form: {
        componentParts: undefined,
      },
      rules: {
        componentParts: [
          {
            required: true,
            message: "请选择梁号",
            trigger: "change",
          },
        ],
      },
      selectSource: [],
      curPileSource: [],
      pileSource: [],
      searchName: null,
      pileLoading: false,
    };
  },
  methods: {
    getData() {
      this.pileLoading = true;
      return new Promise((resolve, reject) => {
        getPartsList()
          .then((res) => {
            let { data } = res;
            this.pileSource = data.result;
            this.getSelectOptions("");
            resolve();
          })
          .catch((_) => {
            this.pileSource = [];
            reject();
          })
          .finally((_) => {
            this.pileLoading = false;
          });
      });
    },

    getSelectOptions(value = "") {
      if (value == "") {
        this.selectSource = this.pileSource;
      } else {
        this.selectSource = this.pileSource.filter((v) =>
          v.toLowerCase().includes(value.toLowerCase())
        );
      }
      if (this.selectSource < 20) {
        this.curPileSource = this.selectSource;
      } else {
        this.curPileSource = this.selectSource.slice(0, 20);
      }
    },

    // 下拉列表滚动时回调 -- 滚动下拉框，加载更多也就展示更多
    // 实现思路：当前下拉的展示列表+10小于全部数据的长度，newArr为新加载的10条数据，当前展示列表拼上新加载的10条；否则， newArr为全部列表中剩余的数据，当前展示列表拼上剩余的数据。
    handlePopupScroll: _.debounce(function () {
      if (this.pileLoading === false) {
        const curLen = this.curPileSource.length;
        const allLen = this.selectSource.length;
        if (curLen + 10 < allLen) {
          const newArr = this.selectSource.slice(curLen, curLen + 10);
          this.curPileSource = this.curPileSource.concat(newArr);
        } else {
          const newArr = this.selectSource.slice(curLen, allLen);
          this.curPileSource = this.curPileSource.concat(newArr);
        }
      }
    }, 200),

    //下拉文本框搜索值变化时回调 -- this.searchName为用户输入的内容，并据此重新发送请求获取过滤后的数据。
    handleSearchStaff: _.debounce(function (val) {
      this.getSelectOptions(val);
      this.searchName = val;
    }, 200),

    handleSelect(value) {
      this.searchName = null;
      this.getSelectOptions();
    },

    onSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.buttonLoading = true;
          saveZlParts({
            id: this.dataSoucre.id,
            componentParts: this.form.componentParts,
          })
            .then((res) => {
              this.closeModal();
              this.$parent.getTableData();
              notificationTip("success", "编辑成功");
            })
            .catch((_) => {})
            .finally((_) => {
              this.buttonLoading = false;
            });
        }
      });
    },

    //关闭弹窗
    closeModal() {
      this.resetForm();
      this.$emit("update:visible", false);
    },

    //重置表单
    resetForm() {
      this.pileSource = [];
      this.selectSource = [];
      this.curPileSource = [];
      this.searchName = null;
      this.pileLoading = false;
      this.form = {
        componentParts: undefined,
      };
      this.$refs.ruleForm.resetFields();
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.add-modal-container {
  .ant-modal-body {
    padding: 0;
  }
  .curve-modal-body {
    padding: 20px 60px 20px 20px;
    max-height: 630px;
    .custom-scrollbar();
    .picture-img {
      display: flex;
      flex-wrap: wrap;
      img {
        width: 128px;
        height: 122px;
        border-radius: 2px;
        object-fit: contain;
        background-color: #f3f4f6;
      }
    }
    .tip {
      color: #faad14;
    }
  }
  .curve-modal-footer {
    text-align: center;
    padding-bottom: 20px;
    button {
      &:last-child {
        margin-left: 20px;
      }
    }
  }
  .ant-form-item {
    .flex();
    .ant-form-item-label {
      width: 120px;
      white-space: pre-wrap;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      height: 40px;
      line-height: 30px;
      label {
        color: #999999;
      }
    }
    .ant-form-item-control-wrapper {
      flex: 1;
    }
  }
}
</style>
